<%= turbo_frame_tag :drawer do %>
  <%= drawer_header(Spree.t('admin.show_json')) %>
  <div class="drawer-body" data-controller="highlight tabs">
    <ul class="nav nav-pills mb-3">
      <li class="nav-item">
        <a class="nav-link active" data-tabs-target="tab" data-action="click->tabs#select"><%= Spree.t('apis.storefront') %></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-tabs-target="tab" data-action="click->tabs#select"><%= Spree.t('apis.platform') %></a>
      </li>
    </ul>
    <div data-tabs-target="panel" class="animate__animated">
      <% if storefront_serializer_exists?(@object) %>
        <pre class="m-0"><code data-highlight-target="code" class="language-json d-block overflow-auto" style="height: calc(100dvh - 11rem);"><%= serialize_to_json(@object, api_type: :storefront) %></code></pre>
      <% else %>
        <div class="text-muted p-5 d-flex align-items-center w-100 justify-content-center flex-column">
          <%= icon 'map-search', class: 'mb-3 opacity-50', style: 'font-size: 2rem;' %>
          <p>
            <%= Spree.t('admin.json_preview.no_api_response') %>
          </p>
        </div>
      <% end %>
    </div>
    <div data-tabs-target="panel" class="animate__animated" hidden>
      <% if platform_serializer_exists?(@object) %>
        <pre class="m-0"><code data-highlight-target="code" class="language-json d-block overflow-auto" style="height: calc(100dvh - 11rem);"><%= serialize_to_json(@object, api_type: :platform) %></code></pre>
      <% else %>
        <div class="text-muted p-5 d-flex align-items-center w-100 justify-content-center flex-column">
          <%= icon 'map-search', class: 'mb-3 opacity-50', style: 'font-size: 2rem;' %>
          <p>
            <%= Spree.t('admin.json_preview.no_api_response') %>
          </p>
        </div>
      <% end %>
    </div>
  </div>
<% end %>
